<template>
  <div class="cost">
    <div v-if="loading" class="skeleton-container" style="margin-top: 20rem">
      <van-skeleton title :row="20" />
    </div>
    <div v-else>
      <nav>
        <div class="box">
          <router-link to="/" style="color: #333">
            <van-icon name="arrow-left" class="icon icon-left" />
          </router-link>
          <span>费用构成</span>
        </div>
      </nav>
      <div class="setion">
        <div class="run"></div>
        <div class="box-1">
          <div class="title">
            <span>基础费用</span>
          </div>
          <div class="text-2">
            <span style="font-size: 15rem">
              在乐淘一番购物时，您需要通过两次支付来完成整个购买流程。每次支付的价格均以日元结算，并按照结算当日站内汇率换算成人民币。
            </span>
          </div>
          <div class="image-1">
            <img
              src="https://image1.leyifan.cn/mercari-cdn/crmebima…19/18bbc489ad604f9d8328bacd302eea8dq17k0hdacu.png"
              alt=""
            />
          </div>
        </div>
        <div class="run"></div>
        <div class="box-2">
          <div class="title"><span>费用详细</span></div>
          <div class="text-3 tcenter">① 商品金额</div>
          <div class="text-4 f15" style="font-size: 15rem">
            <span
              >即您选择的来源网站上，所标明的商品售价。商品价格以您在来源网站下单时的价格为准，并按照当日站内汇率换算成人民币。</span
            >
          </div>
          <div class="text-5 tcenter">② 代购手续费</div>
          <div class="text-6 f15" style="font-size: 15rem">
            <span>目前乐淘一番公测期间，代购手续费全免。（悠享购，人工代购除外）</span>
          </div>
          <div class="text-7 tcenter"><span>③ 日本国内运费</span></div>
          <div class="text-8 f15" style="font-size: 15rem">
            <span>如果所选商品在日本国内有配送费用，则在结算时加算到商品总价中。</span>
          </div>
          <div class="text-9 tcenter"><span>④ 国际物流费用</span></div>
          <div class="text-10 f15" style="font-size: 15rem">
            <span
              >您购买的商品包表到达乐一番仓库后，我们会按照您选择的物流方式来收取国际物流费用。详情可查看“国际物流”</span
            >
          </div>
          <div class="text-11 tcenter"><span>⑤ 乐淘一番包裹仓储费用</span></div>
          <div class="text-12 f15" style="font-size: 15rem">
            <span>1、90天的免费仓储服务:</span>
          </div>
          <div class="text-13">
            <span
              >保管费日期计算方式：自商品入库后的隔天算起，到转为「已付款」状态当天的日数）</span
            >
          </div>
          <div class="text-14 f15"><span>2、超过免费仓储服务：</span></div>
          <div class="text-15">
            <span>若您的包裹为合箱包裹，分别按每个子包裹入库时间计算后累计。</span>
          </div>
          <div class="text-16 color hui">
            <span
              >例：合箱包裹中包含A、B、C三个子包裹，A包裹到达仓库未超90天，B包裹已达95天（包裹重量800g），C包裹已达100天（包裹重量1.5kg），则仓储费用为：B:（95-90）*30*1kg=150日元，C：（100-90）*30*1.5kg=450日元，合计：150+450=600日元</span
            >
          </div>
          <div class="text-17">
            <span>超期包裹按照30日元/kg收取仓储费，子包裹重量若不满1kg则按1kg计算</span>
          </div>
          <div class="text-18 color red">
            <span
              >*请注意：「待付款」状态的订单，若无支付款项安排寄出的情形，也将产生逾期保管费。</span
            >
          </div>
          <div class="text-25 color">
            <span
              >对于存放超过120天仍未提交发货包裹或用户已邮件发送至客服邮箱确认废弃包裹，乐一番统一视为用户遗弃包裹，将对包裹进行废弃处理，废弃后包裹将无法再接受找回请求，造成的损失均由用户自行承担，敬请理解。为了您能尽快收到心爱的包裹，也希望为了能够给其他更多用户提供优质的转运服务，减少无价值的在库时间，请您尽可能在保管期限内提交发货转运。</span
            >
          </div>
          <div class="text-26 color red">
            <span
              >*如果您的乐淘一番代购包裹遇到以下任意一种情况，被作为新包裹重新入库，则免费仓储期将变为：30天，不再适用于乐淘一番代购包裹的免费仓储期。请尽快提交发货申请，避免产生额外的仓储费用。</span
            >
          </div>
          <div class="text-27 color">
            <span
              >1）如果您的商品超过您所选择的线路数量/总价值限制，仓库会将超出限制的包裹取出并合箱，剩余的包裹将被作为新包裹重新入库（例如禁运品、超过同类商品数量限制等）。</span
            >
          </div>
          <div class="text-28 color">
            <span
              >2）如果您的乐淘一番包裹合箱完成后【申请取消】，取消成功后您的包裹将作为一个新包裹（新转运单号）重新入库。</span
            >
          </div>
          <div class="text-29 color red">
            <span>*请注意：重新入库的新包裹内商品不变，不会恢复到合箱之前的状态。</span>
          </div>
          <div class="text-19 color">
            <span
              >3）如果您的乐淘一番包裹【申请分箱】服务，待分箱完成后，您的包裹将作为多个新包裹（新转运单号）重新入库。</span
            >
          </div>
          <div class="text-20 color">
            <span
              >4）如果您的乐淘一番包裹发货后，被海关退运，包裹重新入库乐一番仓库后，将作为一个新包裹（新转运单号）重新入库。</span
            >
          </div>
          <div class="text-21 tcenter"><span>⑥ 包裹合箱手续费:</span></div>
          <div class="text-22" style="font-size: 15rem">
            <span>公测期间，乐淘一番平台下单的包裹，免除合箱费用！！</span>
          </div>
          <div class="text-23 color hui">
            <span
              >例：如您在乐一番仓库共有5个包裹，其中1个为乐淘一番代切包裹，提交合箱发货后实际合箱手续费只需要缴纳4个转运包裹的合箱费用。</span
            >
          </div>
          <div class="text-24">
            <span>则3个*0日元+1个*200日元，需缴纳200日元，系统将自动减免代切包裹的合箱费用。</span>
          </div>
        </div>
        <div class="run"></div>
        <div class="box-3">
          <div class="title"><span>其他方式</span></div>
          <div>拍照任务</div>
          <p class="p1">① 拍照服务-基础版:</p>
          <div class="gg">200日元/次</div>
          <div class="gg">
            <span
              >服务描述：<br />
              拍照方式：无指定无备注；拍照张数：1张。
            </span>
          </div>
          <div class="f12">
            <span
              >注意事项：<br />【基础版】仅打开外箱拍一张包裹内容物，证明不是空箱发货，不会拆开卖家对商品的各种包装。如您需要查看包裹内部商品详情，可选择其他拍照服务。</span
            >
          </div>
          <p class="p2">② 拍照服务-升级版A:</p>
          <div class="gg">300日元/次</div>
          <div class="gg">
            <span
              >服务描述：<br />
              拍照方式：可备注要求；拍照张数：3张。
            </span>
          </div>
          <div class="f12">
            <span
              >注意事项：<br />1、升级版A默认拆开包裹外箱拍内容物，不拆商品原包装，如需拆商品包装拍照，请在申请拍照服务时提出指定要求。不提出则视为无要求。<br />
              2、升级版A适用条件：单个订单内商品数量不得超过30个。否则请选择【拍照服务-升级版B】或【拍照服务-豪华版】。
            </span>
          </div>
          <p class="p3">③ 拍照服务-升级版B:</p>
          <div class="gg">500日元/次</div>
          <div class="gg">
            <span
              >服务描述：<br />
              拍照方式：可备注要求；拍照张数：10张。
            </span>
          </div>
          <div class="f12">
            <span
              >注意事项：<br />1、升级版B默认拆开包裹外箱拍内容物，不拆商品原包装，如需拆商品包装拍照，请在申请拍照服务时提出指定要求。不提出则视为无要求。<br />
              2、升级版B适用条件：单个订单内商品数量不得超过80个。否则请选择【拍照服务-豪华版】。
            </span>
          </div>
          <p class="p4">④ 拍照服务-豪华版:</p>
          <div class="gg">1000日元/次</div>
          <div class="gg">
            <span
              >服务描述：<br />
              拍照方式：可备注高级定制要求，完全按照您的备注进行拍照；拍照张数：不限。
            </span>
          </div>
          <div class="f12">
            <span
              >注意事项：<br />1、豪华版套餐同样默认拆开包裹外箱拍内容物，不拆商品原包装，如需拆商品包装拍照，请在申请拍照服务时提出详细要求。<br />
            </span>
          </div>
          <div class="f12 color">
            <span>
              请注意：<br />
              1、2024年4月5日00:00(北京时间)起,您的包裹入库乐一番仓库后,将无法申请【拍照服务-基础版】200日元/次,请选择其它类型拍照服务。<br />
              2、若您选择以上任意一项拍照服务类型与您实际的拍照需求不符时,仓库将不予进行服务操作,直接退回您的拍照服务费用。并立即确认收货该笔订单。为了避免造成不必要的损失,请您选择服务前仔细阅读关于拍照服务的细则,并根据您自身需求选择最合适的服务。<br />
              3、若您有检品拍照需求,建议您在进行商品下单的时候,提前买检品拍照服务。提前预约检品拍照,可更快收到照片。当您包裹签收时,仓库将会优先进行检品拍照操作,可减少等待包裹上架时间。<br />
              4、当您购买的包裹在乐一番入库后6小时内,还可直接在软件自行购买拍照服务;若超过6小时,系统将自动为您确认收货。请您放心,只要您下单了拍照服务,我们会在确认拍照内容之暂停自动确认收货的流程,确保您有充足的时间来查看和确认商品详情。<br />
              5、在乐淘一番还未为您提供返图之前,请不要申请【合箱服务】。如果您提前申请了【合箱服务】,将会取消本次检品任务,并直接原路退还您的拍照服务费用。(2024年4月1日更新)
              <br />
              6、请在仓库提供照片后<span class="blue">12小时内</span
              >确认照片内容,系统将会在12小时后自动收货<span class="blue"
                >(即煤炉、rakuma、雅虎闲置订单确认完成)</span
              >
              ,若您有异议,请在【乐淘一番】平台上点击【延迟确认】,并在<span class="blue"
                >24小时内</span
              >联系在线客服咨询。确认收货后订单不支售后,请您务必及时确认和申请。<br />
              7、若您在【乐淘一番】平台点击【延迟确认】,您的包裹将无法在乐一番转运平台申请发货操作。请您及时对【检品拍照服务】照片进行确认收货。
            </span>
          </div>
          <p class="p16"><span>加固服务：</span></p>
          <p class="p16"><span>① 增值服务费用（可选）</span></p>
          <div class="imaga-2">
            <img
              src="https://image1.leyifan.cn/reborn-mall-cdn/crmebima…20/292e236829f34b3f9c7d4bda9b814cb6pamuue4h4p.png"
              alt=""
            />
          </div>
          <p class="p16"><span>② 注意事项</span></p>
          <div class="f12">
            <span>
              1、如果您没有选择加固服务，我们将会使用填充用纸对运输箱子与商品之间的缝隙做适当的填充。<br />
              2、乐淘一番无法保证所有包裹和商品在暴力物流过程中不出现意外，如果您的商品在运输过程中出现损坏或者遗失，您可以联系物流承运方和在线客服，我们将协助您向承运方进行赔偿申请。<br />
              3、乐淘一番不支持对商品包装盒子内部加固的要求。（例：拆开手办包装盒，单独对手办本体进行加固。）
            </span>
          </div>
          <p class="p16"><span>③ 包裹加固服务图例</span></p>
          <div class="imaga-3">
            <img
              src="https://image1.leyifan.cn/reborn-mall-cdn/crmebima…20/07fe50adfb644e5e9976ff69fb581179axolqcwqml.jpg"
              alt=""
            />
            <img
              src="https://image1.leyifan.cn/reborn-mall-cdn/crmebima…20/6e555dae4bb745c4be97ea1ad1532b1as15uldqd58.jpg"
              alt=""
            />
            <img
              src="https://image1.leyifan.cn/reborn-mall-cdn/crmebima…20/3f18ecca23a54b2a9069af4447475b05yy9lb1snds.jpg"
              alt=""
            />
            <img
              src="https://image1.leyifan.cn/reborn-mall-cdn/crmebima…20/48fc25326ec2459f9f1737a5a29d4cb02jk6abnhqb.jpg"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let loading = ref(true)
setTimeout(() => {
  loading.value = false
}, 2000)

</script>

<style lang="less" scoped>
.cost {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  // padding: 40rem 0;

  .title {
    text-align: center;
    font-size: 18rem;
    padding-bottom: 5rem;
  }
  nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;

    .box {
      width: 100%;
      height: 40rem;
      background-color: #fff;
      font-size: 18rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .icon-left {
        position: absolute;
        top: 12rem;
        left: 14rem;
      }
      span {
        line-height: 40rem;
        font-size: 16rem;
        font-weight: bold;
      }
    }
  }
  .setion {
    margin-top: 55rem;
    .run {
      width: 100%;
      height: 15rem;
      margin: 10rem 0;
      background-color: #ff8585;
    }
    .box-1 {
      padding: 0 10rem;
      .text-1 {
        padding: 10rem 0;
        text-align: center;
      }
      .image-1 {
        width: 100%;
        height: auto;
        object-fit: cover;
        padding: 6rem 0;
      }
    }
    .box-2 {
      padding: 0 10rem;
      .tcenter {
        font-size: 16rem;
        padding: 10rem 0;
      }
      .color {
        font-size: 12rem;
      }
      .hui {
        color: #777;
      }
      .red {
        color: #e81d1d;
      }
      .f15 {
        font-size: 15rem;
      }
    }
    .box-3 {
      padding: 70rem 10rem;
      img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
      p {
        font-size: 16rem;
      }
      .gg {
        font-size: 15rem;
        padding: 10rem 0;
      }
      .f12 {
        font-size: 12rem;
        padding-bottom: 10rem;
      }
      .color {
        color: rgb(232, 29, 29);
      }
      .blue {
        color: rgb(54, 81, 227);
      }
      .p16 {
        font-size: 16rem;
        padding: 10rem 0;
      }
    }
  }
}
</style>